<template>
    <base-breadcrumb>
        <template>
            <a-card>
                <titleName title="现场旁站记录信息"></titleName>
                <a-form-model
                    :model="form"
                    :hideRequiredMark="true"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
                >
                    <a-row :gutter="24">

                        <a-col :md="16" :sm="16">
                            <a-form-model-item label="所属单位">
                                <BaseInput disabled v-model="form.viewName" />
                            </a-form-model-item>
                        </a-col>
<!--                        <a-col :md="8" :sm="8">-->
<!--                            <a-form-model-item label="所属项目：">-->
<!--                                <BaseInput disabled v-model="form.projectName" />-->
<!--                            </a-form-model-item>-->
<!--                        </a-col>-->

                        <!-- <a-col :md="8" :sm="8">
                            <a-form-model-item label="编号">
                                <BaseInput  disabled v-model="form.number" />
                            </a-form-model-item>
                        </a-col> -->
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="旁站部位">
                                <BaseInput disabled v-model="form.sideStandPart" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="施工日期">
                                <a-date-picker disabled v-model="form.sidStandDate" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="天气">
                              <BaseInput disabled v-model="form.weather" />
                            </a-form-model-item>
                        </a-col>
                        <!-- <a-col :md="8" :sm="8">
                            <a-form-model-item label="天气">
                                <BaseInput  disabled v-model="form.weatherType" />
                            </a-form-model-item>
                        </a-col> -->
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="作业单位">
                                <BaseInput disabled v-model="form.subContractName" />
                            </a-form-model-item>
                        </a-col>
<!--                        <a-col :md="8" :sm="8">-->
<!--                            <a-form-model-item label="重大危险源名称">-->
<!--                                <BaseInput disabled v-model="form.planItemName" />-->
<!--                            </a-form-model-item>-->
<!--                        </a-col>-->
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="旁站内容">
                                <BaseInput disabled v-model="form.sideStandContent" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="旁站人员">
                                <BaseInput disabled v-model="form.sideStandWorkerName" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="开始时间">
                                <BaseInput disabled v-model="form.startDate" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="结束时间">
                                <BaseInput disabled v-model="form.endDate" />
                            </a-form-model-item>
                        </a-col>
                        <a-col
                            :md="24"
                            :sm="24"
                            style="text-align: center"
                            class="mb20"
                            v-for="(item, index) in form.sideStandFormVOS"
                            :key="index"
                        >
                            <a-row :gutter="24" class="center">
                                <a-col :md="6" :sm="6">
                                    <h3>{{ item.name }}:</h3>
                                </a-col>
                                <a-col :md="8" :sm="8" class="f-col">
                                    <span v-for="i in item.contents" :key="i.id">{{ i.name }}:</span>
                                </a-col>
                                <a-col :md="8" :sm="8" class="f-col">
                                    <div v-for="i in item.contents" :key="i.id">
                                        <div v-if="i.type == 1">
                                            <a-checkbox disabled :checked="i.input == '是'"> 是 </a-checkbox>
                                            <a-checkbox disabled :checked="i.input == '否'"> 否 </a-checkbox>
                                        </div>
                                        <div v-else>
                                            <a-tooltip placement="topLeft">
                                                <template slot="title">
                                                    <span>{{ i.input }}</span>
                                                </template>
                                                <span class="text" style="width=400px">{{ i.input }}</span>
                                            </a-tooltip>
                                        </div>
                                    </div>
                                </a-col>
                            </a-row>
                        </a-col>
                        <a-col :md="24" :sm="24">
                            <a-form-model-item label="总结与反馈">
                                <BaseTextarea disabled v-model="form.feedBack" />
                            </a-form-model-item>
                        </a-col>
                                            <a-row :gutter="24">
                        <a-col :span="24">
                            <a-form-model-item
                                label="照片"
                                :labelCol="{ lg: { span: 3 }, sm: { span: 3 } }"
                                :wrapperCol="{ lg: { span: 21 }, sm: { span: 21 } }"
                            >
                                <div style="display: inline-block">
                                    <upload-list
                                        :businessCode="'SHE03'"
                                        :editModel="0"
                                        :uploadArrys.sync="form.files"
                                        uploadType="image"
                                        multiple
                                    ></upload-list>
                                </div>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    </a-row>
                </a-form-model>
            </a-card>
            <div class="tool-btns page-btn-right-top">
                <BasePrintButton type="primary" :beforePrintFn="getSideDetailPrintReq" />
                <a-button type="primary" class="ml20" @click="handleClose">关闭</a-button>
            </div>
        </template>
    </base-breadcrumb>
</template>
<script>
import { getSideDetail, getSideDetailPrint } from '@/api/safetySupervision/side.js'
import BasePrintButton from '@/components/BasePrintButton' // 打印按钮
import Vue from 'vue'
import UploadList from '@/components/UploadList'
export default {
    name:'a'+Date.now(),    components: {
        BasePrintButton,
        UploadList
    },
    data() {
        return {
            id: '',
            form: {
              viewName: ""
            },
        }
    },
    mounted() {
        this.id = this.$route.query.id

        this.getSideDetail()
    },
    methods: {
        getSideDetailPrintReq() {
            const { id } = this.$route.query
            if (!id) return
            const params = {
                id,
            }
            return getSideDetailPrint(params).then((res) => {
                console.log(res)
                return res[1].data.content
            })
        },
        async getSideDetail() {
            let params = {
                id: this.id,
            }
            const [err, res] = await getSideDetail(params)
            if (!err) {
                this.form = {
                    ...this.form,
                    ...res.data,
                }
                this.form.viewName = this.form.branchComName + '/' + this.form.projectName
            }
        },
        handleClose() {
            this.$multiTab.close(this.$route.fullpath)
        },
    },
}
</script>
<style lang="less">
.f-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
.f-col .ant-form-item-label {
    text-align: left;
}

.center {
    display: flex;
    height: 100%;
    flex-direction: row;
    align-items: center;
}
.center .ant-input {
    width: 400px;
}
.text {
    display: block;
    white-space: nowrap;
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
